<template>
  <div class="charge">
    <el-table :data="listData" border style="width: 100%">
      <el-table-column  label="产品图片" width="180">
        <template v-slot='{row}'>
          <el-avatar :src="row.imageUrl" shape='square' :size='80' fit="scale-down"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="productName" label="产品名称" width="180">
      </el-table-column>
      <el-table-column prop="description" label="产品描述"> </el-table-column>
      <el-table-column prop="price" label="价格(元)"> </el-table-column>
      <el-table-column prop="inventory" label="库存"> </el-table-column>
      <el-table-column prop="address" label="操作">
          <template v-slot='{row}'>
            <el-button type="primary" icon="iconfont icon-chongzhi" :disabled='!row.inventory' @click="charging(row)"> 充值</el-button>
          </template>
      </el-table-column>
    </el-table>
  </div>
</template>


<script>
import * as payApi from "@/api/pay";
export default {
  data() {
    return {
      listData: [],
    };
  },

  methods: {
     charging(row) {
      // 当点击充值时，要跳出弹框
      this.$confirm('您正在进行'+row.description+',是否确认?','购买提示',{
        type:'success'
      }).then(()=>{
        // 点击确定的回调
        // 跳转页面，同时将商品对象传递过去
        this.$router.push('/preorder')
        this.$store.commit('preOrder/PLEASE_AN_ORDER',row)
      }).catch(()=>{
        // 点击取消的回调
        this.$message('您已取消购买')
      })

     
    },
  },

 

 async mounted(){
     let res = await payApi.getPro()
     console.log(res);
     this.listData = res.data.data
  },

  meta: { title: "vipCharge", icon: "iconfont icon-chongzhi" },
};
</script>












<style scoped lang='less'>
/deep/.el-table__row .cell {
  text-align: center;
}

/deep/.has-gutter tr th {
  text-align: center;
}
/deep/.has-gutter tr {
  line-height: 48px;
}

/deep/.el-avatar img{
  width: 80px;
  height: 30px;
}
/deep/.el-avatar{
  height: 30px!important;
  line-height: 30px!important;
  background: white;
}
</style>
